<template>
  <el-dialog
    title="信息"
    :visible.sync="addRoleVisible"
    :modal-append-to-body="false"
    :close-on-click-modal="false"
    :close-on-press-escape="false"
    @close="closeBox"
  >
    <el-form :model="form" :rules="rules" ref="form">

      <el-form-item label="名称：" :label-width="formLabelWidth" prop="name">
        <el-input v-model="form.name" autocomplete="off"></el-input>
      </el-form-item>

      <el-form-item label="描述：" :label-width="formLabelWidth" prop="des">
        <el-input v-model="form.des" autocomplete="off"></el-input>
      </el-form-item>

      <el-form-item label="菜单：" :label-width="formLabelWidth" prop="menuIds">

        <el-tree
            v-model="form.menuIds"
            :data="menuData"
            :show-checkbox="true"
            node-key="id"
            ref="trees"
            :default-expand-all="true"
            :props="defaultProps"
            @check-change="handleCheckChange"
            >
        </el-tree>

      </el-form-item>

      <el-divider></el-divider>
      <el-row justify='end' align='middle'>
        <el-col :span='24'>
          <el-form-item style='float: right'>
            <el-button @click="cancel('form')">取 消</el-button>
            <el-button type='primary' @click="submit('form')">确 定</el-button>
          </el-form-item>
        </el-col>
      </el-row>

      <!-- <el-form-item>
        <el-button @click="cancel('form')">取 消</el-button>
        <el-button type="primary" @click="submit('form')">确 定</el-button>
      </el-form-item> -->
    </el-form>
  </el-dialog>
</template>
<script>
export default {
  computed: {

  },
  data() {
    return {
      formLabelWidth: "120px",
      addRoleVisible: true,

      menuData: [],
      defaultProps: {
          children: "children",
          label: 'name'
      },

      form: {
        name: "",
        des: "",
        menuIds: [],
      },
      rules: {
        name: [{ required: true, message: "请填写名称", trigger: "blur" }],
        // menuIds: [{ required: true,  type: 'array', message: "请选择菜单" }],
      },
    };
  },
  props: ['editData'],
  created() {
    this.form = Object.assign({}, this.form, this.editData);
    this.searchMenuList();
  },
  mounted() {
    // this.checkStrictly = true;
    this.$nextTick(() => {
       this.$refs['trees'].setCheckedKeys(this.form.menuIds);
    })
  },
  methods: {
    closeBox() {
      this.addRoleVisible = false;
      this.$ge.$emit("sys-role-close-editRole-finish");
    },
    cancel(formName) {
      this.addRoleVisible = false;
      this.$refs[formName].resetFields();
    },
    //查询菜单列表
    searchMenuList() {
        this.$get("/user/getAllMenuList", {})
        .then((result) => {
            if(result.code == 200 && result.data) {
                this.menuData = result.data;
                this.menuData[0]['disabled'] = true;
            }
        })
        .catch((error) => {
            //异常暂定为空
            this.menuData = []
        })
    },
    handleCheckChange(data, value) {
      // if(this.checkStrictly) {
      //   this.checkStrictly = false;
      // }
      this.form.menuIds = [].concat(this.$refs['trees'].getHalfCheckedKeys(), this.$refs['trees'].getCheckedKeys())
    },
    submit(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          this.$WLoading();
          var param = {};
          param = Object.assign({}, this.form, param);

          this.$postJson("/sys-role/update", param)
            .then((result) => {
              if (result.code == 200) {
               if(result.data) {
                  this.$message.success(result.msg);
                  //关闭弹框并刷新列表
                  this.closeBox();
                  this.$ge.$emit('sys-role-change-search');
                }else {
                  this.$message.error(result.msg);
                }
              } else this.$message.error(result.msg);
              this.$cancelLoading();
            })
            .catch((error) => {
              //添加用户异常
              this.$message.error("添加失败");
              this.$cancelLoading();
            });
        } else {
          console.log("用户填写有误！");
          return false;
        }
      });
    },
  },
};
</script>

<style lang='scss' scoped>
.el-select {
  width: 100%;
}
.vue-treeselect__input {
  border: 0 !important;
}
/* 上传样式 start */
.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.avatar-uploader .el-upload:hover {
  border-color: #409eff;
}
.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  line-height: 178px;
  text-align: center;
}
.avatar {
  width: 178px;
  height: 178px;
  display: block;
}
/* 上传样式 end */
</style>
